<template>
  <div>
    <div class="flex gap-4 p-8">
      <div class="flex flex-col gap-4 w-[320px]">
        <div class="flex flex-col gap-4 justify-start card">
          <h2 class="font-bold">国际化测试</h2>
          <div class="flex gap-4">
            <Button :label="$t('common.add')" severity="success" />
            <Button :label="$t('common.edit')" severity="info" />
            <Button :label="$t('common.delete')" severity="danger" />
          </div>
          <div class="flex gap-4">
            <Button :label="$t('common.search')" icon="pi pi-search" />
            <Button :label="$t('common.reset')" icon="pi pi-refresh" />
          </div>
          <div class="mt-2">
            <p>{{ $t('table.total', { total: 100 }) }}</p>
            <p>{{ $t('form.placeholder', { field: '用户名' }) }}</p>
            <p>{{ $t('message.confirm', { action: '删除' }) }}</p>
          </div>
          <Button @click="localeStore.setLocale('en-US')">English</Button>
          <Button @click="localeStore.setLocale('zh-CN')">中文</Button>
          <div>{{ localeStore.currentLocale }}</div>
        </div>
        <div class="icon-demo">
          <!-- 当前选中的图标 -->
          <div class="mb-4">
            <svg-icon v-if="selectedIcon" :icon="selectedIcon" />
          </div>

          <!-- 选择图标按钮 -->
          <Button @click="visible = true"> 选择图标 </Button>

          <!-- 图标选择对话框 -->
          <Dialog v-model:visible="visible" header="选择图标" :modal="true" class="w-3/4 md:w-1/2">
            <IconSelect v-model="selectedIcon" />
          </Dialog>
        </div>
      </div>
      <div class="flex flex-col gap-4">
        <div class="card">
          <DataTable
            v-model:filters="filters"
            :value="customers"
            paginator
            :rows="10"
            dataKey="id"
            filterDisplay="row"
            :loading="loading"
            :globalFilterFields="['name', 'country.name', 'representative.name', 'status']"
          >
            <template #header>
              <div class="flex justify-end">
                <IconField>
                  <InputIcon>
                    <i class="pi pi-search" />
                  </InputIcon>
                  <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
                </IconField>
              </div>
            </template>
            <template #empty> No customers found. </template>
            <template #loading> Loading customers data. Please wait. </template>
            <Column field="name" header="Name" style="min-width: 12rem">
              <template #body="{ data }">
                {{ data.name }}
              </template>
              <template #filter="{ filterModel, filterCallback }">
                <InputText
                  v-model="filterModel.value"
                  type="text"
                  @input="filterCallback()"
                  placeholder="Search by name"
                />
              </template>
            </Column>
            <Column header="Country" filterField="country.name" style="min-width: 12rem">
              <template #body="{ data }">
                <div class="flex items-center gap-2">
                  <img
                    alt="flag"
                    src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
                    :class="`flag flag-${data.country.code}`"
                    style="width: 24px"
                  />
                  <span>{{ data.country.name }}</span>
                </div>
              </template>
              <template #filter="{ filterModel, filterCallback }">
                <InputText
                  v-model="filterModel.value"
                  type="text"
                  @input="filterCallback()"
                  placeholder="Search by country"
                />
              </template>
            </Column>
            <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
              <template #body="{ data }">
                <div class="flex items-center gap-2">
                  <img
                    :alt="data.representative.name"
                    :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`"
                    style="width: 32px"
                  />
                  <span>{{ data.representative.name }}</span>
                </div>
              </template>
              <template #filter="{ filterModel, filterCallback }">
                <MultiSelect
                  v-model="filterModel.value"
                  @change="filterCallback()"
                  :options="representatives"
                  optionLabel="name"
                  placeholder="Any"
                  style="min-width: 14rem"
                  :maxSelectedLabels="1"
                >
                  <template #option="slotProps">
                    <div class="flex items-center gap-2">
                      <img
                        :alt="slotProps.option.name"
                        :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`"
                        style="width: 32px"
                      />
                      <span>{{ slotProps.option.name }}</span>
                    </div>
                  </template>
                </MultiSelect>
              </template>
            </Column>
            <Column field="status" header="Status" :showFilterMenu="false" style="min-width: 12rem">
              <template #body="{ data }">
                <Tag :value="data.status" :severity="getSeverity(data.status)" />
              </template>
              <template #filter="{ filterModel, filterCallback }">
                <Select
                  v-model="filterModel.value"
                  @change="filterCallback()"
                  :options="statuses"
                  placeholder="Select One"
                  style="min-width: 12rem"
                  :showClear="true"
                >
                  <template #option="slotProps">
                    <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                  </template>
                </Select>
              </template>
            </Column>
            <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
              <template #body="{ data }">
                <i
                  class="pi"
                  :class="{
                    'pi-check-circle text-green-500': data.verified,
                    'pi-times-circle text-red-400': !data.verified,
                  }"
                ></i>
              </template>
              <template #filter="{ filterModel, filterCallback }">
                <Checkbox
                  v-model="filterModel.value"
                  :indeterminate="filterModel.value === null"
                  binary
                  @change="filterCallback()"
                />
              </template>
            </Column>
          </DataTable>
        </div>
      </div>
    </div>
    <AppDesigner />
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { FilterMatchMode } from '@primevue/core/api'
  // @ts-ignore
  import { CustomerService } from '@/service/CustomerService.js'
  import { useLocaleStore } from '@/stores/useLocaleStore'
  const localeStore = useLocaleStore()
  const visible = ref(false)
  const selectedIcon = ref()
  const customers = ref()
  const filters = ref({
    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
    name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
    'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
    representative: { value: null, matchMode: FilterMatchMode.IN },
    status: { value: null, matchMode: FilterMatchMode.EQUALS },
    verified: { value: null, matchMode: FilterMatchMode.EQUALS },
  })
  const representatives = ref([
    { name: 'Amy Elsner', image: 'amyelsner.png' },
    { name: 'Anna Fali', image: 'annafali.png' },
    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
    { name: 'Onyama Limba', image: 'onyamalimba.png' },
    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
    { name: 'XuXue Feng', image: 'xuxuefeng.png' },
  ])
  const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'])
  const loading = ref(true)

  interface Customer {
    date: Date
    name: string
    country: { code: string; name: string }
    representative: { name: string; image: string }
    status: string
    verified: boolean
  }

  onMounted(() => {
    CustomerService.getCustomersMedium().then((data: Customer[]) => {
      customers.value = getCustomers(data)
      loading.value = false
    })
  })

  const getCustomers = (data: any[]): any[] => {
    return [...(data || [])].map(d => {
      d.date = new Date(d.date)
      return d
    })
  }
  const getSeverity = (status: string): 'success' | 'info' | 'warn' | 'danger' | undefined => {
    switch (status) {
      case 'unqualified':
        return 'danger'
      case 'qualified':
        return 'success'
      case 'new':
        return 'info'
      case 'negotiation':
        return 'warn'
      default:
        return undefined
    }
  }
</script>
